<template>
	<view>
		<!-- <view style="height: 500rpx;" v-show="showInput"></view> -->
		<view class="editInfo-view">
			<view class="fx-center-between info-item">
				<view class="">头像</view>
				<view slot="right-icon" class="fx-center" @click="uploadImg">
					<image :src="avtr" mode="aspectFill" class="info-avtr"></image>
					<van-icon name="arrow" color="#9F9D9D" />
				</view>
			</view>
			<view class="fx-center-between info-item" @click="clickInput(1)">
				<view class="">昵称</view>
				<view slot="right-icon" class="fx-center">
					<view class="right-text">{{nickName}}</view>
					<van-icon name="arrow" color="#9F9D9D" />
				</view>
			</view>

			<view class=" info-item">
				<picker mode="selector" :value="sexIndex" :range="sexArr" range-key="name" @change="changeSex">
					<view class="fx-center-between">
						<view class="">性别</view>
						<view slot="right-icon" class="fx-center">
							<view class="right-text">{{sexText}}</view>
							<van-icon name="arrow" color="#9F9D9D" />
						</view>
					</view>
				</picker>
			</view>
			<view class=" info-item">
				<picker mode="region" :value="regionArr" @change="changeRegion">
					<view class="fx-center-between">
						<view class="">地区</view>
						<view slot="right-icon" class="fx-center">
							<view class="right-text">{{regionText}}</view>
							<van-icon name="arrow" color="#9F9D9D" />
						</view>
					</view>
				</picker>
			</view>

		</view>
		<view class="editInfo-view">
			<view class="fx-center-between info-item" @click="clickInput(2)">
				<view class="">个人简介</view>
				<view slot="right-icon" class="fx-center">
					<view class="right-text">{{summary}}</view>
					<van-icon name="arrow" color="#9F9D9D" />
				</view>
			</view>
		</view>


		<view v-show="showInput">
			<c-comment-input ref="inputRef" inputType="User" :showCount="false" @submit="inputSubmit"
				@setBlur="showInput=false"></c-comment-input>
		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				nickName: '', //昵称
				avtr: '', //头像链接
				summary: '', //简介
				// 性别
				sexArr: [{
					name: '男',
					value: 0
				}, {
					name: '女',
					value: 1
				}, {
					name: '保密',
					value: 2
				}],
				sexText: '',
				sexIndex: -1,
				regionText: '', //地区
				regionArr: [], //选中的地区

				showInput: false, //显示输入框
				inputType: 1, //1昵称，2简介

			};
		},
		onLoad() {
			this.getMyInfo()
		},

		methods: {
			getMyInfo() {
				this.$api
					.requst('/gwc/user/me', {})
					.then((res) => {
						this.avtr = res.data.avatar
						this.nickName = res.data.nickname || res.data.mobile
						this.sexText = res.data.gender
						this.summary = res.data.bio || ''
						this.regionText = res.data.region || ''
						if (this.regionText) {
							this.regionArr = this.regionText.split(' ')
						}
					})
			},
			// 点击输入
			clickInput(type) {
				this.inputType = type
				if (this.inputType === 1) {
					this.$refs.inputRef.resetContent(this.nickName)
				} else if (this.inputType === 2) {
					this.$refs.inputRef.resetContent(this.summary)
				}
				this.showInput = true
				this.$refs.inputRef.setFocus()
			},
			// 输入框提交
			inputSubmit(content) {
				if (this.inputType === 1) {
					this.nickName = content
					this.editInfo({
						nickname: this.nickName
					})
				} else if (this.inputType === 2) {
					this.summary = content
					this.editInfo({
						bio: this.summary
					})
				}
			},
			// 性别更改
			changeSex(e) {
				this.sexIndex = Number(e.detail.value)
				this.sexText = this.sexArr[this.sexIndex].name
				this.editInfo({
					sex: this.sexIndex === 0 ? 1 : this.sexIndex === 1 ? 2 : ''
				})
			},
			changeRegion(e) {
				this.regionText = e.detail.value.join(' ')
				this.editInfo({
					region: this.regionText
				})
			},
			// 上传图片
			uploadImg() {
				let that = this;
				uni.chooseImage({
					count: 1, // 最多可以选择的图片张数，默认9
					sizeType: ['compressed'], // original 原图，compressed 压缩图，默认二者都有
					sourceType: ['album', 'camera'], // album 从相册选图，camera 使用相机，默认二者都有
					success: async (res) => {
						that.avtr = res.tempFilePaths[0]
						let data = await that.$api.requestUploadQNY(res.tempFilePaths[0])
						that.editInfo({
							avatar: data.asset_id
						})
					}
				});
			},
			// 修改资料提交
			editInfo(payload) {
				this.$api.requst('/gwc/user/update_profile', {
						payload: payload
					}, 'POST')
					.then((res) => {
						this.$api.showError('修改成功！')
						setTimeout(() => {
							this.getMyInfo()
						}, 500)
					})
			}
		}
	}
</script>

<style scoped lang="scss">
	.editInfo-view {
		margin: 32rpx;
		background-color: #fff;
		border-radius: 4rpx;
		font-size: 30rpx;

		.info-item {
			padding: 36rpx 0;
			margin: 0 32rpx;
			border-bottom: 2rpx solid #E2E2E2;
		}

		.info-item:first-child {
			padding: 28rpx 0;
		}

		.info-item:last-child {
			border: none;
		}

		.info-avtr {
			width: 88rpx;
			height: 88rpx;
			border-radius: 50%;
			margin-right: 4rpx;
		}

		.right-text {
			margin-right: 4rpx;
			color: #5C5F66;
		}
	}

	::v-deep .van-cell {
		padding: 36rpx 32rpx;
		font-size: 32rpx;
		color: #111316;
		display: flex;
		align-items: center;
	}
</style>